<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" style="border: 1px solid red"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      const image = new Image();
      image.width = 100;
      image.height = 100;
      image.onload = drawImageActualSize;

      image.src = "./star.svg";

      function drawImageActualSize() {
        // 画布上使用图片实际尺寸 (150x150)
        canvas.width = this.naturalWidth;
        canvas.height = this.naturalHeight;

        /*
        - drawImage(image, dx, dy)
        - drawImage(image, dx, dy, dwidth, dheight)
        - drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
        */

        // sx: 在 Image 上开始裁剪的 x 轴坐标
        // sy: 在 Image 上开始裁剪的 y 轴坐标
        // swidth: 在 Image 上裁剪的宽度
        // sheight: 在 Image 上裁剪的高度
        // dx: Image 左上角距离画布 x 轴坐标距离
        // dy: Image 左上角距离画布 y 轴坐标距离
        // dwidth: 在画布上指定宽度来绘制 Image
        // dheight: 在画布上指定高度来绘制 Image

        // 绘制图片，使用它的固定尺寸 150x150，忽略构造函数中给定的自定义尺寸 100x100
        // ctx.drawImage(this, 0, 0);

        // 若要使用自定义尺寸，必须指定缩放参数
        // 让我们在画布的左上角绘制一个使用元素宽度和高度属性的图片：
        // ctx.drawImage(this, 0, 0, this.width, this.height);

        // 从图片距离左上角开始的 0, 75 像素处开始裁剪，裁剪宽度 150 像素，裁剪高度 75 像素
        // 绘制裁剪后的图片，使用元素宽度和高度属性的图片
        ctx.drawImage(this, 0, 75, 150, 75, 0, 0, this.width, this.height);
      }
    </script>
  </body>
</html>
